import { App, Component } from "vue";
import {
  ElBacktop,
  ElBadge,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElButton,
  ElCard,
  ElCascader,
  ElCheckbox,
  ElCheckboxGroup,
  ElCol,
  ElColorPicker,
  ElDatePicker,
  ElDialog,
  ElDivider,
  ElDrawer,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElEmpty,
  ElForm,
  ElFormItem,
  ElIcon,
  ElInput,
  ElInputNumber,
  ElMenu,
  ElMenuItem,
  ElOption,
  ElPagination,
  ElPopconfirm,
  ElRadio,
  ElRadioButton,
  ElRadioGroup,
  ElRow,
  ElScrollbar,
  ElSelect,
  ElSubMenu,
  ElSwitch,
  ElTag,
  ElTable,
  ElTableColumn,
  ElText,
  ElTooltip,
  // 指令
  ElLoading
} from "element-plus";

// Directives
const plugins = { ElLoading };

const components = {
  ElBacktop,
  ElBadge,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElButton,
  ElCard,
  ElCascader,
  ElCheckbox,
  ElCheckboxGroup,
  ElCol,
  ElColorPicker,
  ElDatePicker,
  ElDialog,
  ElDivider,
  ElDrawer,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElEmpty,
  ElForm,
  ElFormItem,
  ElIcon,
  ElInput,
  ElInputNumber,
  ElMenu,
  ElMenuItem,
  ElOption,
  ElPagination,
  ElPopconfirm,
  ElRadio,
  ElRadioButton,
  ElRadioGroup,
  ElRow,
  ElScrollbar,
  ElSelect,
  ElSubMenu,
  ElSwitch,
  ElTag,
  ElTable,
  ElTableColumn,
  ElText,
  ElTooltip
};
const useElementPlus = (app: App) => {
  // 注册组件
  Object.keys(components).forEach((key: string) => {
    const component = components[key] as Component;
    app.component(component.name, component);
  });
  // 注册指令
  Object.keys(plugins).forEach((key: string) => {
    app.use(plugins[key]);
  });
};
export { useElementPlus };
